<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Milkyway-GUI</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="milkyway/resources/css/viewport.css">
		<style>
			/*
		body {
		  background: #fff;
		}
		canvas {
		  position: absolute;
		  top: 0;
		  left: 0;
		  height: 100%;
		  width: 100%;
		}
			*/
		.galaxy-eventbar {
			background-color: #000000;
			opacity: .75;
			display: block;
			color: #ffffff;
		}
		</style>
		<script type="text/javascript" src="mootools/mootools-1.2.5.js">
		</script>

		<script type="text/javascript" src="milkyway/milkyway-core.js">
		</script>
		<script type="text/javascript" src="milkyway/milkyway-gui.js">
		</script>
		<script type="text/javascript" src="milkyway/milkyway-viewport.js">
		</script>
		<script type="text/javascript" src="milkyway/milkyway-screen.js">
		</script>
		<script type="text/javascript" src="milkyway/milkyway-bar.js">
		</script>
		<script type="text/javascript">
			var gui = null;
			
			MilkywayGUI.start(function() {
				alert('1.');
				gui = new MilkywayGUI.Viewport({
					id:	'viewport_test',
					bars:	new MilkywayGUI.EventBar({
						'height':	20,
						'skin_class':	'galaxy-eventbar'
					}),
					screens:[new MilkywayGUI.Screen({
						'id':		'video_test',
						'auto_render':	true,
						'height':	600,
						'width':	800,
						'top':		120,
						'left':		0
					})]
				});
				alert('2. - before render');
				gui.render();
			});
		</script>

	</head>
	<body>
		<div style="height: 480px; width: 640px;" id="viewport_test"></div>
	</body>
</html>